<template>
  <div
    v-loading="loading"
    class="dialog_info"
    element-loading-background="rgba(0, 0, 0, 0.4)"
    style="height: 100%;overflow: auto;"
  >
    <div class="dialog_info_title">
      <!-- <div class="tab">
        <span
          v-for="(item, index) in tabTitList"
          :key="index"
          :class="{ activeTab: selectNum == index }"
          class="tabTit"
          @click="changeDig($event,index)"
        >
          {{ item }}
        </span>
      </div> -->
      <!-- 切换tab -->
      <div v-show="$store.getters.yuanCalculationState==2" class="dialogTab " style="margin-top: 10px;">
        <span
          v-for="(item, index) in tabTitList"
          :key="index"
          :class="{ activeTab: selectNum == index }"
          class="tabTit"
          @click="changeDig(item, index)"
        >
          {{ item}}
        </span>
      </div>
      <!-- 横断面水位信息 -->
      <div v-show="selectNum == 0 && $store.getters.yuanCalculationState==2" class="floodYmfx">
        <!-- <div class="rainInfo_top">
          <div>断面名称：<span>{{ SectionListData.sectionname }}</span></div>
          <div>
            洪峰流量(m³/s)：<span>{{ SectionListData.q ? parseFloat(SectionListData.q ).toFixed(3) : "" }}</span>
          </div>
          <div>峰现时间：<span>{{ $moment(SectionListData.tm).format("YYYY-MM-DD HH:mm") }}</span></div>
        </div> -->
        <div class="rainInfo_top2">
            <div style="margin-bottom:4px">
            <!-- <div>
                <div>
                    <span>断面名称</span><span>{{ SectionListData.sectionname || '--' }}</span>
                </div>
              </div> -->
              <div>
                <div>
                    <span>洪峰流量(m³/s)</span><span>{{ SectionListData.q ? parseFloat(SectionListData.q ).toFixed(3) : "--" }}</span>
                </div>
              </div>
              <div>
                <div>
                    <span>峰现时间</span> <span>{{ $moment(SectionListData.tm).format("YYYY-MM-DD HH:mm") }}</span>
                </div>
              </div>
            </div>
        </div>
        <div class="titleWarp">
            <p  class="subtitle warpItem">横断面</p>
            <p  class="subtitle warpItem">断面水位过程图</p>
          </div>
        <div class="echartsWrap">
          <div id="SectionWaterLevel"/>
          <div id="waterLevel" />
        </div>
      </div>
      <!-- 横断面CAD图 -->
      <div v-show="selectNum == 1" class="floodYmfx">
        <!-- <div class="rainInfo_top2">
            <div style="margin-bottom:4px">
            <div>
                <div>
                    <span>断面名称</span><span>{{ SectionListData.sectionname || '--' }}</span>
                </div>
              </div>
              <div>
                <div>
                    <span>高程基准</span><span>{{ SectionListData.e1e ? SectionListData.e1e : "--" }}</span>
                </div>
              </div>
            </div>
        </div> -->
        <div class="cadImg" >
        <template>
            <div  v-if=" properties.img" class="block imgList">
              <el-carousel height="100%" :arrow="properties.PICPATH.length== 1? 'never' : 'always'">
                <el-carousel-item v-for="(item, i) in properties.PICPATH" :key="i">
                  <img :src="item">
                  <div>{{ item }}</div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div  v-else-if=" !properties.img"  class="imgList noImgList">
                <div class="empty"> </div>
                <img src="@/assets/dialog/noImgIcon.png" alt="">
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
    GetSectionDetail,
    GetSection
} from '@/api/zyx.js'
import  * as echarts from 'echarts'

export default {
    // 接受父组件传递的值
    data() {
        return {
            selectNum: 0,
            tabTitList: ['横断面水位信息','横断面CAD图'],
            ForecastList: {},
            parameter: {},
            times: [],
            loading: false,
            WarnIndexData: {
                'level1': '',
                'level2': '',
                'level3': '',
                'level4': ''
            },
            floodForecastData: {
                'fq': [], // 预报流量
                'fz': [] // 预报水位
            },
            SectionListData: {},
            SectionList: {
                'cdistance': [], // x
                'ele': [] // y
            },
            MaxaterLevel: '0', // 最高水位
            maxLl: '', // 流量最大值
            minLl: '', // 流量最小值
            maxSw: '', // 水位最大值
            minSw: '', // 水位最小值
            currentRoute: this.$route.path,//当前路由
            properties:this.$store.getters.dlgParams, //被选中的数据
        }
    },
    mounted() {
        console.log('this.$store.getters.yuanCalculationState',this.$store.getters.yuanCalculationState);
        console.log('properties',this.properties);
        // this.GeData()
    },
    watch: {
        currentRoute: {
            immediate: true,
            deep: true,
            handler: function (val, oldVal) {
                if ((val === '/Rehearsal' || val === '/reserveplan/visualization') && this.$store.getters.yuanCalculationState==2) {
                    this.GeData()
                }else{
                    this.selectNum=1
                }
            }
        }
    },
    created() {},
    methods: {

        // 切换tab
        changeDig(item, index) {
            this.selectNum = index;
            
        },
        GeData() { // 对接列表数据
            this.loading = true
            this.parameter = this.$store.getters.dlgParams.params
            this.floodForecastData = {
                'fq': [], // 预报流量
                'fz': [] // 预报水位
            }
            const paramDetail = {
                rehearsalID: this.parameter.rehearsalID || '1a7c27cd-e970-4ebd-9911-2737ea652dc6',
                sectionName: this.parameter.sectionName || 'k7+0'
            }
            GetSectionDetail(paramDetail).then((res) => {
                this.loading = false
                if (res.isSuccess && res.data) {
                    this.ForecastList = res.data
                    this.WarnIndexData.level1 = this.ForecastList.left
                    this.WarnIndexData.level2 = this.ForecastList.right
                    if (this.ForecastList.rehearsal_Curve_Resuult.length > 0) {
                        var that = this
                        this.ForecastList.rehearsal_Curve_Resuult.forEach(function(item, index) {
                            that.times.push(that.$moment(item.tm).format('YYYY-MM-DD HH:mm'))
                            that.floodForecastData.fq.push(item.q ? parseFloat(item.q) : null) // 预报流量
                            that.floodForecastData.fz.push(item.z ? parseFloat(item.z) : null) // 预报水位
                        })
                    }
                    this.getEchart()
                } else {
                    this.$message.error(res.message)
                }
            })
            const param = {
                rehearsalID: this.parameter.rehearsalID || '1a7c27cd-e970-4ebd-9911-2737ea652dc6',
                id: this.parameter.id || 'WDA8000126100000',
                sectionName: this.parameter.sectionName || ''
            }
            GetSection(param).then((res) => {
                this.loading = false
                if (res.isSuccess && res.data) {
                    this.SectionListData = res.data
                    this.MaxaterLevel = res.data.maxQ
                    if (res.data.sys_Section.length > 0) {
                        var that = this
                        res.data.sys_Section.forEach(function(item, index) {
                            that.SectionList.cdistance.push(item.cdistance ? "干流-" + Number(item
                                .cdistance).toFixed(0) : null)
                            that.SectionList.ele.push(item.ele ? parseFloat(item.ele) : null)
                        })
                    }
                    this.getSectionWaterEchart()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handleSizeChange: function(size) {
            this.pagesize = size
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage
        },
        getSectionWaterEchart() {
            var _this = this
            const option = {
                // title: [{
                //     left: 'center',
                //     subtextStyle: {
                //         align: 'right',
                //         fontSize: 16,
                //         color: '#ffffff'
                //     },
                //     // subtext: '横断面'
                // }],
                tooltip: {
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    borderColor: '#333',
                    trigger: 'axis',
                   // formatter: '{a0}: {c0}',
                    textStyle: {
                        color: '#fff'
                    }
                   
                },
                 grid: {
                    top: '10%',
                    bottom:80,
                },
                legend: {
                    data: [{
                        name: '预报水位',
                        icon: 'path://d="m0,0l40,0l0,10l-40,0m80,-10l40,0l0,10l-40,0l0,-10zm80,0l40,0l0,10l-40,0l0,-10zm-40,50m0,-100"'
                    }],
                    textStyle: {
                        fontSize: 11,
                        color: '#ffffff'
                    },
                    y: '28',
                    x: 'right'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                    textStyle: {},
                    color: '#fff',
                    },
                    data: _this.SectionList.cdistance
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    name: '高程(m)',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#034E6A'],
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        },
                       
                    },
                    max: Math.ceil(_this.MaxaterLevel),
                    nameTextStyle: {
                        color: '#fff'
                    }
                },
                series: [{
                    data: _this.SectionList.ele,
                    name: '高程(m)',
                    // type: 'line',
                    type: 'bar',
                    barWidth: '5%',
                    itemStyle: {
                        // color: '#3abbfe' // 柱条颜色
                        // borderColor: '#3abbfe' // 柱条描边颜色
                        normal: {
                        // 渐变了
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00E4FF' },
                                { offset: 1, color: '#0039BB' }
                            ])
                        }
                    },
                    // smooth: true,
                    symbolSize: 0,
                    // markLine: {
                    //     symbol: ['none', 'none'], // 去掉箭头
                    //     label: {
                    //         position: 'middle',
                    //         formatter: '最高水位' + _this.MaxaterLevel + 'm',
                    //         color: '#fff'
                    //     },
                    //     data: [{
                    //         yAxis: _this.MaxaterLevel
                    //     }],
                    //     lineStyle: {
                    //         type: 'solid',
                    //         width: 2,
                    //         color: '#E6FF00'
                    //     }
                    // }
                }]
            }

            var chartDom = document.getElementById('SectionWaterLevel')
            var myChart = this.$echarts.init(chartDom)
            myChart.setOption(option)
        },
        getEchart() {
            var _this = this
            var arrLLData = [..._this.floodForecastData.fq]
            arrLLData.sort(function(a, b) {
                return b - a
            })
            var arrSWData = [..._this.floodForecastData.fz]
            arrSWData.sort(function(a, b) {
                return b - a
            })
            _this.maxLl = arrLLData[0]
            _this.minLl = arrLLData[arrLLData.length - 1]
            _this.maxSw = arrSWData[0]
            _this.minSw = arrSWData[arrSWData.length - 1]
            var bottomMarginL = (arrLLData[0] - _this.minLl) * 0.8 // 取最大最小差值的10%，间隔数据与X轴
            var bottomMarginZ = Number((arrSWData[0] - _this.minSw) * 0.1).toFixed(2) // 取最大最小差值的10%，间隔数据与X轴
           // console.log(arrSWData)
            // console.log(_this.maxSw)
            // console.log(_this.minSw)
            // console.log(bottomMarginZ)

            // 断面水位过程图
            const option = {
                // title: [{
                //     left: 'center',
                //     subtextStyle: {
                //         align: 'right',
                //         fontSize: 16,
                //         color: '#ffffff'
                //     },
                //     // subtext: '断面水位过程图'
                // }],
                tooltip: {
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    borderColor: '#333',
                    trigger: 'axis',
                    orient: 'vertical',
                    right: 20,
                    top: 20,
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                    data: [{
                        name: '预报水位',
                        icon: 'path://d="m0,0l40,0l0,10l-40,0m80,-10l40,0l0,10l-40,0l0,-10zm80,0l40,0l0,10l-40,0l0,-10zm-40,50m0,-100"'
                    },
                    {
                        name: '预报流量',
                        icon: 'path://d="m0,0l40,0l0,10l-40,0m80,-10l40,0l0,10l-40,0l0,-10zm80,0l40,0l0,10l-40,0l0,-10zm-40,50m0,-100"'
                    }
                    ],
                    textStyle: {
                        fontSize: 11,
                        color: '#ffffff'
                    },
                    // y: '18',
                    // x: 'right'
                },
                grid: [{
                    // bottom: '70%',
                    top: '10%',
                    bottom:80,
                }
                    // {
                    //     top: '40%',
                    //     backgroundColor: 'hsl(210deg 100% 97%)'
                    // }
                ],
                xAxis: [{
                    type: 'category',
                    data: _this.times,
                    axisLabel: {
                        textStyle: {},
                        color: '#fff',
                        fontSize: 11,
                        interval: 24,
                        rotate: '45',
                        formatter: function(value, index) {
                            if (value != undefined && value != '' && value != null) {
                                if (index == 0) {
                                    let time = _this.$moment(value).format('YYYY-MM-DD HH:mm')
                                    return _this.formatTimeAllBr(time)
                                } else {
                                    if (index > 0) {
                                        if (index > 1) {
                                            // console.log(_this.$moment(value).format('HH:mm'))
                                            if (_this.$moment(value).format('HH:mm') == '00:00') {
                                                return _this.$moment(value).format('DD日')
                                            } else {
                                                return _this.$moment(value).format('DD日 HH时')
                                            }
                                        } else {
                                            return ''
                                        }
                                    } else {
                                        console.log(_this.$moment(value).format('HH:mm'))

                                        if (_this.$moment(value).format('HH:mm') == '00:00') {
                                            return _this.$moment(value).format('DD日')
                                        } else {
                                            return _this.$moment(value).format('DD日 HH时')
                                        }
                                    }
                                }
                            } else {
                                return ''
                            }
                        }
                    },
                    // gridIndex: 1,
                    name: '时间(h)',
                     nameTextStyle:{
                      color:'#fff',
                      padding:[0,0,0,5]
                     }
                }],
                yAxis: [{
                    type: 'value',
                    scale: true,
                    boundaryGap: true,
                    splitNumber: 6,
                    // gridIndex: 1,
                    // splitLine: {
                    //     show: false
                    // },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#034E6A'],
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#2FC8DC',
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#2FC8DC'
                        },
                        fontSize: 11,
                        interval: 'auto',
                        formatter: '{value}'
                    },
                    min: _this.minSw > 0 ? _this.minSw > bottomMarginZ ? Number(_this.minSw - bottomMarginZ).toFixed(2) : _this.minSw : 0,
                    max: Math.ceil(_this.maxSw),//_this.maxSw,
                    name: '水位(m)',
                    nameTextStyle: {
                        color: '#2FC8DC'
                    }
                },
                {
                    type: 'value',
                    scale: true,
                    boundaryGap: true,
                    splitNumber: 4,
                    // gridIndex: 1,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#39BD4E',
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#39BD4E'
                        },
                        fontSize: 11,
                        interval: 'auto',
                        formatter: '{value}'
                    },
                    min: _this.minLl > 0 ? _this.minLl > bottomMarginL ? _this.minLl - bottomMarginL
                        : _this.minLl : 0,
                    max: _this.maxLl,
                    name: '流量(m³/s)',
                    nameTextStyle: {
                        color: '#39BD4E',
                        fontSize: 11
                    }
                }
                ],
                series: [{
                    name: '预报水位',
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,
                    // xAxisIndex: 1,
                    yAxisIndex: 0,
                    showBackground: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#2FC8DC',
                                width: 3
                            },
                            color: '#2FC8DC'
                        }
                    },
                    data: _this.floodForecastData.fz
                },
                {
                    name: '预报流量',
                    type: 'line',
                    smooth: true,
                    symbolSize: 0,
                    // xAxisIndex: 1,
                    yAxisIndex: 1,
                    showBackground: true,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#39BD4E',
                                width: 3
                            },
                            color: '#39BD4E'
                        }
                    },
                    data: _this.floodForecastData.fq
                }, {
                    name: '',
                    type: 'line',
                    // xAxisIndex: 1,
                    // yAxisIndex: 2,
                    markLine: {
                        symbol: ['none', 'none'], // 去掉箭头
                        label: {
                            position: 'middle',
                            formatter: '左岸高程' + _this.WarnIndexData.level1 + 'm',
                            offset: [-50, 4],
                            color: '#e71300',
                          
                        },
                        data: [{
                            yAxis: _this.WarnIndexData.level1
                        }],
                        lineStyle: {
                            type: 'solid',
                            width: 2,
                            color: '#e71300'
                        }
                    }
                }, {
                    name: '',
                    type: 'line',
                    // xAxisIndex: 1,
                    // yAxisIndex: 2,
                    markLine: {
                        symbol: ['none', 'none'], // 去掉箭头
                        label: {
                            position: 'middle',
                            formatter: '右岸高程' + _this.WarnIndexData.level2 + 'm',
                            offset: [150, 4],
                            color: '#e71300'
                        },
                        data: [{
                            yAxis: _this.WarnIndexData.level2
                        }],
                        lineStyle: {
                            type: 'solid',
                            width: 2,
                            color: '#e71300'
                        }
                    }
                }
                ]
            }
            this.myChart = this.$echarts.init(document.getElementById('waterLevel'))
            this.myChart.setOption(option)
        }

    }
}
</script>
<style scoped lang="less">
	.tab {
		border-bottom: 1px solid #335875;
		padding-bottom: 15px;
		height: auto;
		overflow: hidden;
	}

	.dialog_info_title {
		height: 99%;
	}

	.floodYmfx {
		width: 100%;
		height: calc(100% - 60px);
		overflow: hidden;
	}

	.rainInfo_top {
		height: 65px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
        margin-left: 20px;

		>div {
			box-sizing: border-box;
			width: 25%;
		}
	}

	.echartsWrap {
		width: 100%;
		//height: calc(100% - 70px);
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
        padding: 0 10px 10px 10px;

		#SectionWaterLevel {
			width: 38%;
			height: 500px;
		}

		#waterLevel {
			width: 62%;
			height: 500px;
		}
	}

    .rainInfo_top2 {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 10px 20px 0 20px;
        &>:nth-child(1){
            width: 100%;
            box-sizing: border-box;
            display: flex;
            background: rgba(0,165,233,0.3);
            padding: 10px 0 ;
            font-size: 14px;
            >div{
                box-sizing: border-box;
                flex: 1;
                color: #fff;
                border-left: 1px solid #4285A6;
                padding-left:10px ;
                >div{
                    background: url(../../assets/newimg/矩形.png) no-repeat left center;
                    background-size: auto 66%;
                    &>:nth-child(1){
                        color: #A5C2D8;
                        margin-bottom: 4px;
                    }
                    span {
                        color: #fff;
                        display: block;
                        text-indent: 14px;
                    }
                }
            }
            &>:nth-child(1){
                border: none;
            }
        }
        >div:nth-child(2){
            width: 31%;
        }
        >div:nth-child(3){
            width: 40%;
            text-indent: 30px;
            text-align: left;
        }
    }
    .titleWarp{
        width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
        padding: 0 10px 10px 10px;
        .warpItem:nth-child(1){
            margin-left: 10px;
            width: 38%;
            
        }
        .warpItem:nth-child(2){
            margin-left: 40px;
            width: 58%;
        }
    }
    .subtitle{
        width: 100%;
        height: 28px;
        line-height: 0px;
        margin: 20px 0 4px 0;
        text-indent: 4px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
      }
      .subtitle:nth-child(1){
        background: url(../../assets/dialog/dikuang2.png) no-repeat center;
        background-size: 100% 100%;
      }
      .subtitle:nth-child(2){
        background: url(../../assets/dialog/dikuang1.png) no-repeat center;
        background-size: 100% 100%;
      }
      .cadImg{
        margin: 20px;
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        align-items: center;
      }

      .imgList {
        padding: 10px;
        width: 100%;
        height: 595px;
        background-color: rgba(0, 25, 68,0.8);
    
        img {
            width: 100%;
            height: 100%;
        }
    
        /deep/.el-carousel__item,
        /deep/.el-carousel {
            //height: 220px;
            height: 100%;
        }
    }
    .noImgList {
        display: flex;
        justify-content: center;
        align-items: center;
        img{
        width:100px;
        height:120px;
        }
    }
</style>
